<template>
  <div>
    <TimePickerYu @time-range-selected="handleTimeSelected"></TimePickerYu>
    <div style="height: 10px">
      <strong style="display: block; text-align: center; font-size: 40px"
        >卫星云图</strong
      >
    </div>

    <div class="box">
      <div class="chart">
        <div id="charts" ref="chart">
          <!-- 显示 Yuntu 图片 -->
          <img :src="yuntuImageUrl" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimePickerYu from "./TimePickerYu";
import api from "../api/user/yuntu.js";

export default {
  name: "yuntu",
  components: { TimePickerYu },
  data() {
    return {
      yuntuImageUrl: "", // 用于存储 Yuntu 图片的 URL
      selectedTimes: [],
    };
  },
  methods: {
    async handleTimeSelected(timeData) {
      const totalMinutes = parseInt(timeData.start);
      const hour = parseInt(timeData.start.split(":")[0]);
      const minute = parseInt(timeData.start.split(":")[1]);

      const year = parseInt(timeData.date.split("-")[0]);
      const month = parseInt(timeData.date.split("-")[1]);
      const day = parseInt(timeData.date.split("-")[2]);

      try {
        // 使用您的API文件中的方法来获取Yuntu图片数据
        const response = await api.getYuntuData(year, month, day, hour, minute);
        if (response.status === 200) {
          // 创建一个Blob对象
          const blob = new Blob([response.data], { type: "image/jpg" });

          // 创建一个对象URL以在<img>标签中显示图像
          const imageUrl = URL.createObjectURL(blob);

          // 更新组件中的yuntuImageUrl
          this.yuntuImageUrl = imageUrl;

          // 将选择的时间添加到列表中
          const formattedTime = `${year}-${month}-${day} ${hour}:${minute}`;
          this.selectedTimes.push(formattedTime);
        } else {
          console.error("Error fetching Yuntu image:", response.statusText);
        }
      } catch (error) {
        console.error("Error fetching Yuntu image:", error);
      }
    },
  },
  async mounted() {
  // 页面初始化时手动触发一次时间选择事件，以获取默认时间点的云图
  const defaultTimeData = {
    date: "2023-08-02", // 默认日期
    start: "00:00", // 默认时间
  };
  await this.handleTimeSelected(defaultTimeData); // 使用await等待handleTimeSelected完成
},
};
</script>

<style scoped lang="scss">
@media screen and (min-width: 700px) {
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .chart {
    border: 3px double #c7e8ff;
    background-color: #fff;
    margin: 60px;
    width: 70%;
    height: 65vh;

    #charts {
      width: 100%;
      height: 65vh;
    }
    img {
      max-width: 100%;
      max-height: 100%;
      display: block;
    }
  }
}
</style>
